<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="../public/node_modules/element/element.css">
		<link rel="stylesheet" href="../public/node_modules/element/icon.css">
		<link rel="stylesheet" href="../public/css/public-pc.css">
		<link rel="stylesheet" href="../public/css/style-wap.css">
		<link rel="stylesheet" href="../public/css/public-wap.css">
		<link rel="stylesheet" href="../public/css/style-pc.css">
		<link rel="stylesheet" href="../public/css/animate.min.css">
		<script src="../public/js/jquery.js"></script>
		<script src="../public/js/jquery.scrollAnimations.min.js"></script>
		<script src="../public/js/popper.min.js"></script>
		<style>
			.cn_1 {
				position: absolute;
				top: 63.9%;
				left: 55.3%;
				width: 0.8vw;
				height: 0.8vw;
				background-color: #ae3636;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			.cn_2 {
				position: absolute;
				top: 63.9%;
				left: 55.3%;
				width: 1.5vw;
				height: 1.5vw;
				background-color: #df7777;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			.cn_2::before {
				content: "重庆";
				position: absolute;
				font-weight: bold;
				color: #333;
				white-space: nowrap;
				top: 100%;
				left: 50%;
				transform: translate(-50%, 0);
				font-size: 0.62vw;
			}

			@keyframes bdl {
				0% {
					width: 0vw;
					height: 0vw;
					opacity: 0;
				}

				100% {
					width: 3vw;
					height: 3vw;
					opacity: 0.5;
				}
			}

			.cn_3 {
				position: absolute;
				top: 63.9%;
				left: 55.3%;
				width: 2vw;
				height: 2vw;
				background-color: #ae363666;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				transition: all .3s;
				animation: bdl 2s infinite;
			}

			.cn_4 {
				position: absolute;
				top: 63.9%;
				left: 55.3%;
				width: 2vw;
				height: 2vw;
				background-color: #ae363666;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				transition: all .3s;
				animation: bdl 2s infinite;
				animation-delay: 1s;
			}

			/* 国外市场 */
			.cnworld_1 {
				position: absolute;
				top: 44%;
				left: 36%;
				width: 0.8vw;
				height: 0.8vw;
				background-color: #ae3636;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			.ccnworld_2 {
				position: absolute;
				top: 44%;
				left: 36%;
				width: 1.5vw;
				height: 1.5vw;
				background-color: #df7777;
				transform: translate(-50%, -50%);
				border-radius: 50%;
			}

			.cnworld_2::before {
				content: "重庆";
				position: absolute;
				font-weight: bold;
				color: #333;
				white-space: nowrap;
				top: 100%;
				left: 50%;
				transform: translate(-50%, 0);
				font-size: 0.62vw;
			}

			@keyframes bdl {
				0% {
					width: 0vw;
					height: 0vw;
					opacity: 0;
				}

				100% {
					width: 3vw;
					height: 3vw;
					opacity: 0.5;
				}
			}

			.cnworld_3 {
				position: absolute;
				top: 44%;
				left: 36%;
				width: 2vw;
				height: 2vw;
				background-color: #ae363666;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				transition: all .3s;
				animation: bdl 2s infinite;
			}

			.cnworld_4 {
				position: absolute;
				top: 44%;
				left: 36%;
				width: 2vw;
				height: 2vw;
				background-color: #ae363666;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				transition: all .3s;
				animation: bdl 2s infinite;
				animation-delay: 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="show-pc">
				<div class="about-head">
					<img src="../public/img/矩形 17.png" scale-animate="1" alt="" class="about-head-img" />
					<!-- banner内容 -->
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title">联系我们</div>
						<div class="banner-head-text">CONTACT US</div>
					</div>
					<div class="banner-sel" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="/psk-web-html/contact/contactinformation.html">
									<div class="sel-item-text  ">
										合作联系
									</div>
								</a>
								<a href="">
									<div class="sel-item-text active">
										营销网络
									</div>
								</a>



							</div>
							<div class="sel-item-right">
								<div class="home-img-box">
									<img src="../public/img/首页home.png" alt="" class="home-img" />
								</div>
								<div class="home-box-text">
									<a href="/psk-web-html/index/index.html">首页</a>
								</div>
								<div class="home-box-text">></div>
								<div class="home-box-text">营销网络</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="show-wap">
				<div class="about-head-wap">
					<img src="../public/img/矩形 17.png" scale-animate="1" alt="" class="about-head-img" />
					<div class="about-head-text" data-animation="fadeInDown">
						<div class="banner-head-title-wap ">联系我们</div>
						<div class="banner-head-text-wap">CONTACT US</div>
					</div>
					<div class="banner-sel-wap" data-animation="bounceInLeft">
						<div class="pageContent sel-box">
							<div class="sel-item">
								<a href="/psk-web-html/contact/contactinformation.html">
									<div class="sel-item-text-wap ">
										合作联系
									</div>
								</a>
								<a href="">
									<div class="sel-item-text-wap active">
										营销网络
									</div>
								</a>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 内容区 -->
			<div class="show-pc">
				<div class="pageContent ContactUs-box">
					<div class="ContactUs-market-item">
						<div class="ContactUs-market-left">
							<div class="market-item-within market-item-active">国内市场</div>
							<div class="market-item-within">国外市场</div>
						</div>

						<!-- 需要切换的内容  国内市场 -->
						<div class="ContactUs-market-middle">
							<div class="middle-left" data-animation="fadeInUp">
								<div class="middle-title">
									重庆普施康科技发展股份有限公司在中国市场一直致力于体外反搏事业的健康发展，在整个中国市场产品覆盖三十余个行政省区，全国多地设立了办事机构和合作中心并在国内大型学术会议上广受瞩目。
								</div>
								<div class="middle-text" v-for="item in 7">
									<span>华北：</span>
									中国医学科学院阜外医院、中国人民解放军总医院(北京301医院)、北京大学第三医院、中国康复研究中心(北京唐爱医院)、天津·泰达国际心血管病医院、河北省人民医院、邯郸市第一医院、山西医科大学第一医院、内蒙古自治区人民医院。
								</div>
							</div>
							<div class="middle-right">
								<img src="../public/img/cMap.png" alt="" class="cMap-img" />
								<div class="cn_1"></div>
								<div class="cn_2"></div>
								<div class="cn_3"></div>
								<div class="cn_4"></div>
							</div>
						</div>
						<!-- 需要切换的内容  国外市场 -->
						<div class="outside">
							<div class="outside-title">我司产品覆盖全球超过30个国家或地区</div>
							<div class="world-item">
								<img src="../public/img/world.png" alt="" class="world-img" />
								<div class="cnworld_1"></div>
								<div class="cnworld_2"></div>
								<div class="cnworld_3"></div>
								<div class="cnworld_4"></div>

							</div>
						</div>

						<div class="ContactUs-market-right">
							<div class="market-right-line"></div>
							<div class="market-right-middle">
								<div class="right-switch">
									<span class="switch-active">1</span><span class="oblique">/</span><span>2</span>
								</div>
								<div class="ContactUs-arrow">
									<a href="">
										<div class="el-icon-arrow-right"></div>
									</a>
								</div>
							</div>
							<div class="market-right-line"></div>
						</div>
					</div>


				</div>
			</div>
			<div class="show-wap">
				<div class="pageContent ContactUs-box-wap">
					<div class="ContactUs-market-left-wap">
						<div class="market-item-within-wap market-item-active-wap">国内市场</div>
						<div class="market-item-within-wap">国外市场</div>
					</div>
					<div class="ContactUs-gn">
						<div class="middle-left-wap" data-animation="fadeInUp">
							<div class="middle-title-wap">
								重庆普施康科技发展股份有限公司在中国市场一直致力于体外反搏事业的健康发展，在整个中国市场产品覆盖三十余个行政省区，全国多地设立了办事机构和合作中心并在国内大型学术会议上广受瞩目。
							</div>
							<div class="middle-text-wap" v-for="item in 7">
								<span>华北：</span>
								中国医学科学院阜外医院、中国人民解放军总医院(北京301医院)、北京大学第三医院、中国康复研究中心(北京唐爱医院)、天津·泰达国际心血管病医院、河北省人民医院、邯郸市第一医院、山西医科大学第一医院、内蒙古自治区人民医院。
							</div>
							<div class="middle-right-wap">
								<img src="../public/img/cMap.png" alt="" class="cMap-img-wap" />
							<!-- 	<div class="cn_1"></div>
								<div class="cn_2"></div>
								<div class="cn_3"></div>
								<div class="cn_4"></div> -->
							</div>
						</div>
					</div>
					<div class="ContactUs-gw">
						<div class="outside-title-wap">我司产品覆盖全球超过30个国家或地区</div>
						<div class="world-item-wap">
							<img src="../public/img/world.png" alt="" class="world-img" />
							<!-- <div class="cnworld_1"></div>
							<div class="cnworld_2"></div>
							<div class="cnworld_3"></div>
							<div class="cnworld_4"></div> -->
						
						</div>
					</div>

				</div>
			</div>

	</body>
	<script type="text/javascript" src="../public/node_modules/vue/vue.js"></script>
	<script type="text/javascript" src="../public/node_modules/element/element.js"></script>
	<script type="text/javascript" src="../public/js/pubilc.js"></script>
	<script type="text/javascript" src="../public/js/swiper-bundle.min.js"></script>
	<script type="text/javascript" src="../public/js/pubilc-wap.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {}
			},
			mounted() {
				
				const tabs = $('.ContactUs-market-left-wap .market-item-within-wap');
				
				const domesticContent = $('.ContactUs-gn'); 
				const foreignContent = $('.ContactUs-gw'); 
				
				
				domesticContent.show();
				foreignContent.hide();
				
				tabs.on('click', function() {
					console.log(1111);
					const text = $(this).text().trim();
				
				
					tabs.removeClass('market-item-active-wap');
				
					$(this).addClass('market-item-active-wap');
				
					if (text === '国内市场') {
						domesticContent.show();
						foreignContent.hide();
					} else if (text === '国外市场') {
						domesticContent.hide();
						foreignContent.show();
					}
				});
			},
			methods: {

			}
		});
	</script>

</html>